<template>
  <div id="mr-login">
    <div class="tab-img"><img src="../../static/img/user_login.jpg" /></div>
    <div class="from">
      <group>
        <x-input keyboard="number" name="mobile" ref="mobile01" v-model="mobileval" is-type="china-mobile" placeholder="请输入手机号">
            <img slot="label" src="../../static/img/shouji@2x.png" >
        </x-input>
        <x-input  type="text" v-model="codeval" class="weui-vcode" placeholder="请输入短信验证码">
          <img slot="label" src="../../static/img/mima@2x.png" >
          <div slot="right" v-bind:class="[start? 'vcode-inactive':'vcode-active']"  @click="sendcode" style="color:rgb(47, 120, 236)">{{timerText()}}</div>
          <countdown style="display:none" slot="right" :start="start" @on-finish="timerFinished" v-model="timer"></countdown>
        </x-input>
      </group>
        <x-dialog v-model="showHideOnBlur" class="dialog-demo image-code" hide-on-blur>
          <x-input :show-clear="false" placeholder="请输入图形验证码" v-model="imageCode" class="weui-cell_vcode ">
            <img slot="label" src="../../static/img/mima@2x.png" >
            <img slot="right" @click="imgevent" class="weui-vcode-img" :src="urlImgCode + captchaid">
          </x-input>
          <div @click="confirmImgCode" class="confirm">
            <span>确定</span>
          </div>
        </x-dialog>
        <div class="agreement"><x-icon type="ios-circle-filled" size="30"></x-icon>阅读并同意<a href="../../static/HnAgreement.html">《赠险用户协议》</a></div>
      <div class="share" @click="next">下一步</div>
    </div>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { XInput, Group, Countdown, TransferDomDirective as TransferDom, XDialog } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      mobileval: '',
      codeval: '',
      tokenval: '',
      imageCode: '', // 图形验证码
      timer: 60, // 10,
      start: false,
      showHideOnBlur: false,
      urlImgCode: this.$store.state.imgvcode,
      captchaid: ''
    }
  },
  components: {
    XInput,
    Group,
    Countdown,
    XDialog
  },
  created () {
    window.document.title = '用户注册'
    this.tokenval = utils.AnonToken(timeStamp)
  },
  methods: {
    imgevent () {
      this.captchaid = '00' + utils.randomString(32)
    },
    // 发送验证码
    sendcode () {
      if (this.start) {
        return
      } else if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '请输入手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.mobile01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确手机号',
          type: 'warn',
          width: '4rem'
        })
      } else {
        this.imageCode = ''
        this.showHideOnBlur = !this.showHideOnBlur
        this.captchaid = '00' + utils.randomString(32)
      }
    },
    confirmImgCode () {
      var params = {
        captcha: this.imageCode,
        captchaId: this.captchaid
      }
      if (this.imageCode === '') {
        this.$vux.toast.show({
          text: '请输入图形码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validcode(params).then(res => {
          if (res.status === '200') {
            this.showHideOnBlur = false
            this.start = true
            this.vscode()
          } else {
            this.captchaid = '00' + utils.randomString(32)
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    vscode () {
      api.sendCode({
        token: this.tokenval,
        timestamp: timeStamp,
        mobile: this.mobileval,
        type: 2,
        sendType: 1,
        from: 0,
        captcha: this.imageCode,
        captchaId: this.captchaid
      }).then(res => {
        if (res.status === '200') {
          this.$vux.toast.show({
            text: res.message,
            type: 'success',
            width: '4rem'
          })
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    next () {
      // 验证码登录
      if (this.mobileval === '') {
        this.$vux.toast.show({
          text: '请输入手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.$refs.mobile01.valid === false) {
        this.$vux.toast.show({
          text: '请输入正确手机号',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.codeval === '') {
        this.$vux.toast.show({
          text: '请输入短信验证码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validate({
          token: this.tokenval,
          timestamp: timeStamp,
          mobile: this.mobileval,
          type: 2,
          sendType: 1,
          vcode: this.codeval,
          from: 0
        }).then(res => {
          if (res.status === '200') {
            this.userLogin()
          } else {
             this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    userLogin () {
      var userId = utils.getQueryString('userId') || utils.getQueryString('u')
      var postId = utils.getQueryString('postId')
      var partnerId = utils.getQueryString('partnerId') || utils.getQueryString('pt')
      var picId = utils.getQueryString('picId')
      var channel = utils.getQueryString('channel') || utils.getQueryString('c')
      api.customer({
        token: this.tokenval,
        timestamp: timeStamp,
        mobile: this.mobileval,
        vcode: this.codeval,
        partnerId: partnerId
      }).then(res => {
        if (res.status === '200') {
          if (utils.getQueryString('postId')) {
            window.location.href = '/customer/complete?shareParam=share&userId=' + userId + '&postId=' + postId + '&channel=' + channel + '&partnerId=' + partnerId + '&userMobile=' + this.mobileval + '&userVcode=' + this.codeval
          } else if (utils.getQueryString('picId')) {
            window.location.href = '/customer/complete?shareParam=share&userId=' + userId + '&picId=' + picId + '&channel=' + channel + '&partnerId=' + partnerId + '&userMobile=' + this.mobileval + '&userVcode=' + this.codeval
          } else {
            window.location.href = '/customer/complete?shareParam=share&userId=' + userId + '&partnerId=' + partnerId + '&userMobile=' + this.mobileval + '&userVcode=' + this.codeval + '&channel=' + channel
          }
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    timerFinished: function () {
      console.log('stop')
      this.start = false
      this.timer = 60
    },
    timerText: function () {
      if (this.start) {
        return '重新发送(' + this.timer + ')'
      } else {
        return '发送验证码'
      }
    }
  }
}
</script>

